{layout name="view" /}
<div class="shopp">
	{foreach key="k" name="data" item="value"}
	<div class="card" style="width: 22rem;">
		<img class="card-img-top" src="{$value.img}" alt="Card image cap" style="height:262px;">
		<div class="card-body">
			<div class="shopp-head">
				<h5 class="card-title" style="font-weight: bold;">{$value.title}</h5>
				<p style="color:#aaa">价格:<span
						style="color: red;font-size: 16px; font-weight: bold;">{$value.price}</span>￥</p>
			</div>
			<p class="card-text" style="font-size: 10px;">{$value.text}</p>
			<div class="btn" style="text-align: center;width: 100%;">
				<button type="button" class="btn btn-primary btn-lg myModals" data-toggle="modal" data-method="setTop"   sid={$value.id} style="width:150px;outline: none;">购买</button>
			</div>
		</div>
	</div>
	{/foreach}

	<div style="background: #eee;width:80px; height:80px;position:fixed;bottom: 10vw;right: 15vw;" id="layerDemos"
		data-method="showsping">
		<img src="/img/info/timg.png" style="width:100%">
	</div>
</div>
<style>
	.shopp {
		display: flex;
		justify-content: left;
		flex-wrap: wrap;

	}

	.shopp .card {
		margin: 10px 16px;
	}

	.shopp-head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
</style>

<script>
	//购物车工具包
	//1-----获取数据信息
	function getshopping(name) {
		return JSON.parse(localStorage.getItem(name));
	}

	layui.use('layer', function () { //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

		//触发事件
		var active = {
			setTop: function (othis) {
				//判断是否登录
				if (getCookie('PHPSESSID') == null) {
					layer.msg('请先登录', { icon: 5 });
					return;
				}
				var val;
				var that = this;
				var sid = $(that).attr('sid');
				$.ajax({
					type: "get",
					url: "shoppinfo?id=" + sid,
					success: function (datas) {
						if (datas != null) {
							val = datas;
						} else {
							layer.msg('程序异常!', { icon: 5, time: 1000 });
						}
					},
					error: function (err) {
						layer.msg('程序异常!', { icon: 5, time: 1000 });
					}
				});
				var type = othis.data('type'), text = othis.text();
				//多窗口模式，层叠置顶
				layer.open({
					type: 1
					, offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
					, id: 'layerDemo' + type //防止重复弹出
					, content: '<div style="padding: 20px 100px;">是否购买确认购买该商品？</div>'
					, btn: ['取消', '确定']
					, btnAlign: 'c' //按钮居中
					, shade: 0 //不显示遮罩
					, yes: function () {
						layer.closeAll();
					},
					btn2: function () {
						layer.msg('加入购物车成功', { icon: 6 });
						if (getshopping(val.title) == null) {
							localStorage.setItem(val.title, JSON.stringify({
								name: val.title,
								number: 1
							}));
						} else {
							localStorage.setItem(val.title, JSON.stringify({
								name: val.title,
								number: ++getshopping(val.title).number
							}));
						}
					}
				});
			},
			showsping: function (othis) {
				var  alldata= window.localStorage;
				var htmls='';
				Object.keys(alldata).forEach(function (key) {
					var number=JSON.parse(alldata[key]).number;
					htmls+=`<div style="font-size:20px;">${key}商品数目:${number}</div><br>`;
				});
				layer.alert(alldata, {
					title: '购物车：',
					content: htmls,
					area: '500px',
					btn:['结算','确定'],
					yes:function(){
						layer.msg('购买成功!');
						localStorage.clear();
					}
				});
			}
		}
		$('.myModals').on('click', function () {
			var othis = $(this), method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		}

		);
		$('#layerDemos').on('click', function () {
			var othis = $(this), method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		}
		);
	});
</script>
<!-- <script>
	 (function () {
        $('.myModals').on('click', function (event, id) {
            var id = $(this).attr('sid');
            $.ajax({
                type: 'GET',
                url: 'shoppinfo?id=' + id,
                dataType: 'json',
                success: data => {
                    var html=`
					<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
 aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document">
	 <div class="modal-content">
		 <div class="modal-header">
			 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				 <span aria-hidden="true">&times;</span>
			 </button>
			 <div class="tc-head">
				 
				 <div style="margin-top: 7%;">
					 <span class="text-info">姓名: ${data.title}</span>
					 <span class="text-info" style="margin-left: 40px">性别: ${data.sex}</span>
					 <span class="text-info" style="margin-left: 40px">住址: ${data.city}</span>
				 </div>
			 </div>
		 </div>
		 <div class="modal-body ">
			 <div style="text-align: center;">
				 证件照：<img src="${data.url}" style="width:100px; height:100px" />
				 <span style="margin-left: 40px">存照 :<img src="${data.url1}" style="width:100px; height:100px;" /></span>
			 </div>
		 
			 <div class="" style="font-size: 12px;text-indent:2em; width:400px;">
				 ${data.desc}
			 </div>
		 </div>
		 <div class="modal-footer modal-footer-my">
			 <button type="button" class="btn btn-secondary " data-dismiss="modal">关闭</button>
		 </div>
	 </div>
 </div>
</div>
                    `;
                    $('#tc').html(html);
                    $('#exampleModalCenter').modal();
                },
                error: err => {
                    alert("获取数据失败");
                }
            });
        });
    })();
</script>  -->